<template>
	<view class="shops-parent">
		<!-- 地图 -->
		<view class="mymap">
			<!-- 地图 -->
			<map :class="mapIsOpen?'mapopten':'mapclose'" :latitude="covers[0].latitude"
				:longitude="covers[0].longitude" :markers="covers" enable-zoom="true">
			</map>
			<!-- 地图 -->
			<!-- 收缩地图 -->
			<view class="map-close-open" v-if="mapIsOpen" @click="toggle">
				收起地图
				<uni-icons type="top" size="20" color="#777777"></uni-icons>
			</view>
			<view class="map-close-open" v-else @click="toggle">
				展开地图
				<uni-icons type="bottom" size="20" color="#777777"></uni-icons>
			</view>
			<!-- 收缩地图 -->
		</view>
		<!-- 地图 -->

		<!-- 门店列表 开始 -->
		<scroll-view class="shoplist" scroll-y="true">
			<view class="shoplist-shops" v-for="(item,index) in myShopList" @click="openfoods(item)">
				<view class="shoplist-shops-left">
					<view class="shoplist-shops-name">{{item.sname}}</view>
					<view class="shoplist-shops-addr-online">{{item.saddress}}</view>
					<view class="shoplist-shops-addr-online">营业时间：{{item.onlineStartTime}}-{{item.onlineEndTime}}</view>
					<view class="shoplist-shops-status-online" v-if="isOnlineTime(item)==1">营业中</view>
					<view class="shoplist-shops-status-rest" v-else-if="isOnlineTime(item)==2">门店休息</view>
					<view class="shoplist-shops-status-rest" v-else>繁忙置休</view>
				</view>
				<view class="shoplist-shops-right">
					<view>
						<view class="shoplist-shops-takeout">{{item.takeoutStr}}</view>
						<uni-icons type="phone-filled" size="20" color="#E60012"></uni-icons>
						<view class="shoplist-shops-tel">{{item.phone}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 门店列表 结束 -->
		<view style="height: 180rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myShopList: [],
				/* 放到data这里，可以在页面上显示 */
				covers: [{
					id: 1,
					longitude: 121.4741,
					latitude: 30.91803,
					/* latitude: 34.221,
					longitude: 108.953451, */
					iconPath: '../../static/other/markers.png',
					width: 25,
					height: 30
				}],
				mapIsOpen: true,
				takeout: 0
			}
		},
		onLoad(params) {
			// 获得云端门店列表
			this.getShopsList() //获取下面写的getShopsList方法
			// 设置附近门店经纬度
			this.setShopListLL()
			this.getLocationsss()
			//加载类别（需自提或可外送）的门店 
			if (params.takeout != undefined && params.takeout != null) {
				this.takeout = params.takeout
			}
		},
		methods: {
			getLocationsss() {
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						console.log('路径：' + getApp().globalData.baseUrl)
					}
				})
			},
			getShopsList() {
				//获得云端门店列表
				uni.request({
					url: getApp().globalData.baseUrl + '/shops/findbycity',

					/* 后端地址或者是请求地址 */
					success: result => {
						if (result.data.statusCode == 200) {
							this.myShopList = result.data.mydata
							console.log(this.myShopList) //将后端取得数据放到data中的myShopList列表中
						} else {
							console.log('fail')
						}
					}
				})
			},
			openfoods(item) {
				//console.log(item)
				uni.setStorageSync("curshop", item) // 将取到的数据放到缓存中
				uni.navigateTo({
					url: '../foods/foods?sid=' + item.sid
				})
				/* if(this.isOnlineTime(item)==1){
					app.globalData.myShop = item
					//保存门店数据
					uni.setStorageSync("myShop",item)
					uni.navigateTo({
						url:"../foods/foods?sid="+item.sid
					})
				} */
			},
			isOnlineTime(item) {
				let date = new Date()
				let starttime = new Date(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' +
					item.onlineStartTime)
				let endtime = new Date(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + item
					.onlineEndTime)
				if (date > starttime && date < endtime && item.sstatus == 1)
					return 1
				else if ((date < starttime || date > endtime || item.sstatus == 2) && item.sstatus < 3)
					return 2
				else
					return 3
			},
			toggle() {
				this.mapIsOpen = !this.mapIsOpen
			},
			setShopList(takeout) {
				this.myShopList = this.myShopList.filter(item => item.takeout == takeout)
			},
			setShopListLL() {
				this.myShopList.forEach(item => {
					let mycover = {}
					mycover.id = item.sid
					mycover.longitude = item.longitude
					mycover.latitude = item.latitude
					mycover.iconPath = '../../static/other/markers.png'
					mycover.width = 25
					mycover.height = 30
					this.covers.push(mycover)
				})
			}
		}
	}
</script>

<style lang="scss">
	.shops-parent {
		height: 90vh;
	}

	.mymap {
		width: 100vw;
		font-size: 26rpx;
		color: #777777;

		.mapopten {
			height: 260px;
			width: 100vw;
		}

		.mapclose {
			height: 0;
			width: 100vw;
		}

		.map-close-open {
			width: 100vw;
			height: 70rpx;
			background-color: #FFFFFF;
			text-align: center;
			line-height: 70rpx;
		}
	}

	.shoplist {
		width: 100vw;
		max-height: 90vh;

		.shoplist-shops {
			width: 95%;
			height: 234rpx;
			background-color: #FFFFFF;
			margin: 20rpx auto;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 25rpx;
			display: flex;

			.shoplist-shops-left {
				width: 70%;

				.shoplist-shops-name {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					height: 46rpx;
				}

				.shoplist-shops-addr-online {
					font-size: 24rpx;
					color: #777777;
					height: 46rpx;
				}

				.shoplist-shops-status-online {
					width: 90rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					font-size: 24rpx;
					color: #FFFFFF;
					background-color: #E60012;
				}

				.shoplist-shops-status-rest {
					width: 120rpx;
					text-align: center;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 22rpx;
					color: #999999;
					background-color: #EEEEEF;
				}
			}

			.shoplist-shops-right {
				border-left: 1px solid #EEEEEF;
				padding-left: 20rpx;

				.shoplist-shops-takeout {
					width: 110rpx;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 24rpx;
					text-align: center;
					color: #E60012;
					background-color: #FFF7F8;
					margin: 30rpx 0;
				}

				.shoplist-shops-tel {
					color: #777777;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
